<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <link rel="shortcut icon" href="img/favicon.png">
    <title>APQP微信企业号</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-reset.css">
    <!--external css-->
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="assets/toastr-master/toastr.css">
    <link rel="stylesheet" href="assets/zTree/css/metroStyle/metroStyle.css">
    <!--right slidebar-->
    <link rel="stylesheet" href="css/slidebars.css">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style-responsive.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="assets/toastr-master/toastr.js"></script>
    <![endif]-->
</head>

<body>
    <div id="container">
        <!--header start-->
        <header class="header blue-bg">
            <div class="sidebar-toggle-box">
                <i class="fa fa-bars"></i>
            </div>
            <!--logo start-->
            <a href="index.html" class="logo"><span>APQP</span>微信企业号</a>
            <div id="top_menu" class="nav notify-row">
                <a href="index.html" class="btn btn-shadow btn-default"><i class="fa fa-trophy"></i> APQP</a>
                <a href="enterprise.html" class="btn btn-shadow btn-primary"><i class="fa fa-desktop"></i> 企业号</a>
            </div>
            <div class="top-nav">
                <ul class="nav pull-right top-menu">
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" src="img/avatar1_small.jpg">
                            <span class="username">管理员</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            <li><a href="#"><i class=" fa fa-suitcase"></i>简介</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i> 设置</a></li>
                            <li><a href="#"><i class="fa fa-bell-o"></i> 通知</a></li>
                            <li><a href="login.html"><i class="fa fa-key"></i> 退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </header>
        <!--header end-->
        <!--sidebar start-->
        <aside>
            <div id="sidebar" class="nav-collapse">
                <!-- sidebar menu start-->
                <ul class="sidebar-menu" id="nav-accordion">
                    <li>
                        <a href="enterprise.html">
                            <i class="fa fa-dashboard"></i>
                            <span>首页</span>
                        </a>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:;" class="active">
                            <i class="fa fa-laptop"></i>
                            <span>通讯录管理</span>
                        </a>
                        <ul class="sub">
                            <li><a href="contacts.dep.html">部门管理</a></li>
                            <li class="active"><a href="contacts.member.html">成员管理</a></li>
                            <li><a href="contacts.tag.html">标签管理</a></li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:;">
                            <i class="fa fa-book"></i>
                            <span>应用管理</span>
                        </a>
                        <ul class="sub">
                            <li><a href="app.list.html">应用列表</a></li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:;">
                            <i class="fa fa-cogs"></i>
                            <span>基础管理</span>
                        </a>
                        <ul class="sub">
                            <li><a href="base.usscfg.html">企业号配置</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- sidebar menu end-->
            </div>
        </aside>
        <!--sidebar end-->
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper site-min-height">
                <div class="row">
                    <div class="col-md-3">
                        <section class="panel">
                            <header class="panel-heading">西城电子</header>
                            <div class="panel-body">
                                <div id="treeview" class="ztree">
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="col-md-9">
                        <section class="panel">
                            <header class="panel-heading">西城电子</header>
                            <div class="panel-body">
                                <form action="" class="form-inline">
                                    <div class="form-group">
                                        <span class="iconic-input right">
                                            <i class="fa fa-search"></i>
                                            <input type="text" class="form-control" placeholder="Search&hellip;">
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#add-member-modal">新增成员</button>
                                    </div>
                                </form>
                            </div>
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" name="" id="">
                                        </th>
                                        <th>姓名</th>
                                        <th>手机</th>
                                        <th>邮箱</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="" id="">
                                        </td>
                                        <td><img src="img/gallery/1.jpg" width="24" alt=""> 胡春雨</td>
                                        <td>13960707375</td>
                                        <td>13960707375@139.com</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="" id="">
                                        </td>
                                        <td><img src="img/gallery/2.jpg" width="24" alt=""> 胡春雨</td>
                                        <td>13960707375</td>
                                        <td>13960707375@139.com</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="" id="">
                                        </td>
                                        <td><img src="img/gallery/3.jpg" width="24" alt=""> 胡春雨</td>
                                        <td>13960707375</td>
                                        <td>13960707375@139.com</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="" id="">
                                        </td>
                                        <td><img src="img/gallery/4.jpg" width="24" alt=""> 胡春雨</td>
                                        <td>13960707375</td>
                                        <td>13960707375@139.com</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="" id="">
                                        </td>
                                        <td><img src="img/gallery/5.jpg" width="24" alt=""> 胡春雨</td>
                                        <td>13960707375</td>
                                        <td>13960707375@139.com</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="" id="">
                                        </td>
                                        <td><img src="img/gallery/6.jpg" width="24" alt=""> 胡春雨</td>
                                        <td>13960707375</td>
                                        <td>13960707375@139.com</td>
                                    </tr>
                                </tbody>
                            </table>
                        </section>
                        <nav class="text-right">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="add-member-modal" tabindex="-1" role="dialog" aria-labelledby="add-member-label">
                    <div class="modal-dialog modal-" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="add-member-label">新增成员</h4>
                            </div>
                            <div class="modal-body">
                                <form action="" class="mb-15">
                                    <div class="form-group">
                                        <label for="">姓名</label>
                                        <input type="text" class="form-control" placeholder="name">
                                    </div>
                                    <div class="form-group">
                                        <label for="">手机号</label>
                                        <input type="text" class="form-control" placeholder="telephone">
                                    </div>
                                    <div class="form-group">
                                        <label for="">邮箱</label>
                                        <input type="text" class="form-control" placeholder="email">
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary">添加</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                Copyright © 2016-2017 宙能信息. All rights reserved.
                <a href="#" class="go-top">
                    <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dcjqaccordion.2.7.js" class="include" type="text/javascript"></script>
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="js/respond.min.js"></script>
    <script src="assets/toastr-master/toastr.js"></script>
    <script src="assets/zTree/js/jquery.ztree.all-3.5.min.js"></script>
    <!--right slidebar-->
    <script src="js/slidebars.min.js"></script>
    <!--common script for all pages-->
    <script src="js/common-scripts.js"></script>
    <script>
    $(function() {
        var zTreeSetting = {
            view: {
                selectedMulti: false
            },
            callback: {
                onClick: function(e, treeId, treeNode) {
                    toastr.warning(treeNode.id + ' ' + treeNode.name, '提示');
                }
            },
            check: {
                // enable: true
            }
        };
        var zTreeNodes = [{
            id: 'xmb',
            name: "项目部",
            open: true,
            children: [{
                id: 'slw',
                name: "苏利文"
            }, {
                id: 'jk',
                name: "杰克"
            }, {
                id: 'ln',
                name: "露娜"
            }]
        }, {
            id: 'jsb',
            name: "技术部",
            open: true,
            children: [{
                id: 'aln',
                name: "阿莲娜",
            }, {
                id: 'drk',
                name: "德瑞克",
            }, {
                id: 'sm',
                name: "山姆",
            }]
        }, {
            id: 'cpb',
            name: "产品部",
            children: [{
                id: 'lj',
                name: "雷锋"
            }]
        }];
        $.fn.zTree.init($('#treeview'), zTreeSetting, zTreeNodes);
        $.fn.zTree.init($('#treeview2'), zTreeSetting, zTreeNodes);

        $('.table').on('click', 'th>:checkbox', function() {
            // 全选/反选
            $(this).parents('.table').find('tbody :checkbox').prop('checked', $(this).prop('checked'));
        }).on('click', 'td>:checkbox', function() {
            // 单个勾选
            var table = $(this).parents('.table');
            var tbody = table.find('tbody');
            var totalLen = tbody.children('tr').length;
            var checkedLen = tbody.find(':checkbox:checked').length;
            table.find('thead :checkbox').prop('checked', checkedLen == totalLen);
        });

        var modal = $('#add-member-modal');
        modal.on('submit', 'form', function(e) {
            e.preventDefault();
            toastr.success('添加成功！', '提示');
        }).on('click', '.modal-footer .btn-primary', function() {
            modal.find('form').trigger('submit');
            modal.modal('hide');
        });
    });
    </script>
</body>

</html>
